<template>
	<!--pages/order-detail/order-detail.wxml-->

	<view class='container'>

		<view class='order-detail'>
			<view class='delivery-addr'>
				<view class='user-info'>
					<text class='item'>{{ userAddrDto.receiver }}</text>
					<text class='item'>{{ userAddrDto.mobile }}</text>
				</view>
				<view class='addr'>
					{{ userAddrDto.province }}{{ userAddrDto.city }}{{ userAddrDto.area }}{{ userAddrDto.area }}{{
							userAddrDto.addr
					}}
				</view>
			</view>



			<!-- 商品信息 -->
			<view class='prod-item'>

				<block v-for="(item, index) in orderItemDtos" :key='index'>
					<view class='item-cont' @click='toProdPage($event)' :data-prodid="item.prodId">
						<view class='prod-pic'>
							<image :src='item.pic' lazy-load></image>
						</view>
						<view class='prod-info'>
							<view class='prodname'>
								{{ item.prodName }}
							</view>
							<view class='prod-info-cont'>
								<text class='number'>数量：{{ item.prodCount }}</text>
								<text class='info-item'>{{ item.skuName }}</text>
							</view>
							<view class='price-nums clearfix'>
								<text class='prodprice'><text class='symbol'>￥</text>
									<text class='big-num'>{{ parsePrice(item.price)[0] }}</text>
									<text class='small-num'>.{{ parsePrice(item.price)[1] }}</text></text>
								<view class='btn-box'>
									<text class='btn' v-if="item.status != 1">申请售后</text>
									<text class='btn'>加购物车</text>
								</view>
							</view>
						</view>
					</view>
				</block>

				<view class='prod-foot'>
					<view class='btn'>
						<button v-if="item.status == 1" class="button" @click="onCancelOrder($event)"
							:data-ordernum="item.primaryOrderNo" hover-class='none'>取消订单</button>
						<button v-if="item.status == 1" class="button warn" @click="onConfirmReceive($event)"
							:data-ordernum="item.primaryOrderNo" hover-class='none'>再次购买</button>
						<button v-if="item.status == 1" class="button warn" @click="onPayAgain($event)"
							:data-ordernum="item.primaryOrderNo" hover-class='none'>付款</button>
						<button v-if="item.status == 3 || item.status == 5" class="button" @click="toDeliveryPage($event)"
							:data-ordernum="item.primaryOrderNo" hover-class='none'>查看物流</button>
						<button v-if="item.status == 3" class="button warn" @click="onConfirmReceive($event)"
							:data-ordernum="item.primaryOrderNo" hover-class='none'>确认收货</button>
					</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class='order-msg'>
				<view class='msg-item'>
					<view class='item'>
						<text class='item-tit'>订单编号：</text>
						<text class='item-txt'>{{ orderNumber }}</text>
						<text class='copy-btn' @click='copyBtn($event)'>复制</text>
					</view>
					<view class='item'>
						<text class='item-tit'>下单时间：</text>
						<text class='item-txt'>{{ createTime }}</text>
					</view>
				</view>
				<view class='msg-item'>
					<view class='item'>
						<text class='item-tit'>支付方式：</text>
						<text class='item-txt'>微信支付</text>
					</view>
					<view class='item'>
						<text class='item-tit'>配送方式：</text>
						<text class='item-txt'>普通配送</text>
					</view>
					<view class='item'>
						<text class='item-tit'>订单备注：</text>
						<text class='item-txt'>{{ remarks }}</text>
					</view>
				</view>
			</view>

			<view class='order-msg'>
				<view class='msg-item'>
					<view class='item'>
						<view class='item-tit'>订单总额：</view>
						<view class='item-txt price'>
							<text class='symbol'>￥</text>
							<text class='big-num'>{{ parsePrice(productTotalAmount)[0] }}</text>
							<text class='small-num'>.{{ parsePrice(productTotalAmount)[1] }}</text>
						</view>
					</view>
					<view class='item'>
						<view class='item-tit'>运费：</view>
						<view class='item-txt price'>
							<text class='symbol'>￥</text>
							<text class='big-num'>{{ parsePrice(transfee)[0] }}</text>
							<text class='small-num'>.{{ parsePrice(transfee)[1] }}</text>
						</view>
					</view>
					<view class='item'>
						<view class='item-tit'>优惠券：</view>
						<view class='item-txt price'>
							<text class='symbol'>-￥</text>
							<text class='big-num'>{{ parsePrice(reduceAmount)[0] }}</text>
							<text class='small-num'>.{{ parsePrice(reduceAmount)[1] }}</text>
						</view>
					</view>
					<view class='item payment'>
						<view class='item-txt price'>
							实付款：
							<text class='symbol'>￥</text>
							<text class='big-num'>{{ parsePrice(actualTotal)[0] }}</text>
							<text class='small-num'>.{{ parsePrice(actualTotal)[1] }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部栏 -->
			<view class='order-detail-footer'>
				<text class='dele-order' v-if="status == 5 || status == 6" @click="delOrderList">删除订单</text>
				<view class='footer-box'>
					<text class='apply-service' @click="toService">联系客服</text>
					<text class='buy-again' @click="onPayAgain">再次购买</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
import { request } from "../../utils/http";
import { parsePrice } from '../../wxs/numbers.js'
export default {
	data() {
		return {
			orderItemDtos: [],
			remarks: "",
			actualTotal: 0,
			userAddrDto: null,
			orderNumber: "",
			createTime: "",
			status: 0,
			productTotalAmount: '',
			transfee: '',
			reduceAmount: '',
			actualTotal: '',
			prodid: ''
		}
	},
	onLoad: function (options) {
		this.loadOrderDetail(options.orderNum);
	},
	methods: {
		parsePrice,
		loadOrderDetail: function (orderNum) {
			var ths = this;
			uni.showLoading();
			//加载订单详情
			var params = {
				url: "/p/myOrder/orderDetail",
				method: "GET",
				data: {
					orderNumber: orderNum
				},
				callBack: function (res) {

					ths.orderNumber = orderNum;
					ths.actualTotal = res.actualTotal;
					ths.userAddrDto = res.userAddrDto;
					ths.remarks = res.remarks;
					ths.orderItemDtos = res.orderItemDtos;
					ths.createTime = res.createTime;
					ths.status = res.status;
					ths.productTotalAmount = res.orderItemDtos[0].productTotalAmount;
					ths.transfee = res.transfee;
					ths.reduceAmount = res.reduceAmount;
					ths.actualTotal = res.actualTotal;

					uni.hideLoading();
				}
			};
			request(params);

		},
		// 进入人工客服
		toService() {
			uni.navigateTo({
				url: '/pages/service/service',
			})
		},
		delOrderList(e) {
			/*删除已完成||已取消的订单*/
			var ths = this;
			uni.showModal({
				title: "",
				content: "确定要删除此订单吗？",
				confirmColor: "#eb2444",
				success(res) {
					if (res.confirm) {
						uni.showLoading();
						var params = {
							url: "/p/myOrder/" + ths.orderNumber,
							method: "DELETE",
							data: {},
							callBack: function (res) {

								uni.hideLoading();
								uni.showToast({
									title: "删除成功!"
								})
								setTimeout(() => {
									uni.hideToast();
									uni.navigateTo({
										url: "/pages/orderList/orderList"
									})
								}, 1000)
							},
						};
						request(params);
					} else if (res.cancel) {
						console.log("用户点击取消");
					}
				},
			});
		},
		toProdPage(e) {
			var prodid = e.currentTarget.dataset.prodid;
			uni.navigateTo({
				url: '/pages/prod/prod?prodid=' + prodid,
			})
		},
		copyBtn(e) {
			var ths = this;
			uni.setClipboardData({
				//准备复制的数据
				data: ths.orderNumber,
				success: function (res) {
					uni.showToast({
						title: '复制成功',
					});
				}
			})
		},
		onCancelOrder(e) {
			/*取消订单*/
			var ordernum = e.currentTarget.dataset.ordernum;
			var ths = this;
			uni.showModal({
				title: '',
				content: '要取消此订单？',
				confirmColor: "#3e62ad",
				cancelColor: "#3e62ad",
				cancelText: '否',
				confirmText: '是',
				success(res) {
					if (res.confirm) {
						uni.showLoading({
							mask: true
						});

						var params = {
							url: "/p/myOrder/cancel/" + ordernum,
							method: "PUT",
							data: {},
							callBack: function (res) {
								//console.log(res);
								ths.loadOrderData(ths.sts, 1);
								uni.hideLoading();
							}
						};
						request(params);
					} else if (res.cancel) {
						//console.log('用户点击取消')
					}
				}
			})
		},
		onPayAgain(e) {
			/*付款*/
			uni.showLoading({
				mask: true
			});
			var params = {
				url: "/p/order/pay",
				method: "POST",
				data: {
					payType: 1,
					orderNumbers: this.orderNumber
				},
				callBack: res => {
					//console.log(res);
					uni.hideLoading();
					uni.requestPayment({
						timeStamp: res.timeStamp,
						nonceStr: res.nonceStr,
						package: res.packageValue,
						signType: res.signType,
						paySign: res.paySign,
						success: function () {
							uni.navigateTo({
								url: '/pages/pay-result/pay-result?sts=1&orderNumbers=' + e.currentTarget.dataset.ordernum,
							})
						},
						fail: function (err) {
							//console.log("支付失败");
						}
					})

				}
			};
			request(params);
		},
		toDeliveryPage(e) {
			/**
				* 查看物流
				*/
			uni.navigateTo({
				url: '/pages/express-delivery/express-delivery?orderNum=' + e.currentTarget.dataset.ordernum
			})
		},
		onConfirmReceive(e) {
			/*确认收货*/
			var ths = this;
			uni.showModal({
				title: '',
				content: '我已收到货？',
				confirmColor: "#eb2444",
				success(res) {
					if (res.confirm) {
						uni.showLoading({
							mask: true
						});

						var params = {
							url: "/p/myOrder/receipt/" + e.currentTarget.dataset.ordernum,
							method: "PUT",
							data: {},
							callBack: function (res) {
								//console.log(res);
								ths.loadOrderData(ths.sts, 1);
								uni.hideLoading();
							}
						};
						request(params);
					} else if (res.cancel) {
						//console.log('用户点击取消')
					}
				}
			})
		}

	}
}
</script>

<style>
/* pages/order-detail/order-detail.wxss */

page {
	background: #f4f4f4;
}

.order-detail {
	margin-bottom: 120rpx;
}

.order-detail .delivery-addr {
	padding: 20rpx 30rpx;
	background: #fff;
}

.order-detail .delivery-addr .user-info {
	line-height: 48rpx;
	word-wrap: break-word;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.order-detail .delivery-addr .user-info .item {
	font-size: 28rpx;
	margin-right: 30rpx;
	vertical-align: top;
	display: inline-block;
}

.order-detail .delivery-addr .addr {
	font-size: 26rpx;
	line-height: 36rpx;
	color: #999;
}

/* 商品列表 */

.prod-item {
	background-color: #fff;
	margin-top: 15rpx;
	font-size: 28rpx;
}

.prod-item .item-cont .prod-pic image {
	width: 180rpx;
	height: 180rpx;
}

.prod-item .item-cont {
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-top: 2rpx solid #f1f1f1;
}

.prod-item .item-cont .prod-pic {
	font-size: 0;
	display: block;
	width: 160rpx;
	height: 160rpx;
	overflow: hidden;
	background: #fff;
	margin-right: 16rpx;
}

.prod-item .item-cont .prod-pic image {
	width: 100%;
	height: 100%;
}

.prod-item .item-cont .prod-info {
	margin-left: 10rpx;
	font-size: 28rpx;
	width: 100%;
	position: relative;
	height: 80px;
	-webkit-flex: 1;
	-ms-flex: 1;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	flex: 1;
}

.prod-item .item-cont .prod-info .prodname {
	font-size: 28rpx;
	line-height: 40rpx;
	max-height: 86rpx;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	word-break: break-all;
}

.prod-item .item-cont .prod-info .prod-info-cont {
	position: relative;
	color: #999;
	margin-top: 10rpx;
	font-size: 24rpx;
}

.prod-item .item-cont .prod-info .prod-info-cont .info-item {
	color: #999;
	height: 28rpx;
	margin-top: 10rpx;
	font-size: 24rpx;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	word-break: break-all;
	width: 70%;
}

.prod-item .item-cont .prod-info .prod-info-cont .number {
	float: left;
	margin-right: 20rpx;
}

.prod-item .price-nums {
	margin-top: 30rpx;
}

.prod-item .price-nums .prodprice {
	color: #333;
	height: 50rpx;
	line-height: 50rpx;
	font-size: 24rpx;
	float: left;
}

.prod-item .price-nums .btn-box {
	float: right;
	text-align: right;
}

.prod-item .price-nums .btn-box .btn {
	padding: 6rpx 30rpx;
	line-height: 36rpx;
	margin-left: 20rpx;
	font-size: 24rpx;
	display: inline-block;
	border: 2rpx solid #e4e4e4;
	border-radius: 50rpx;
}

/* 
订单信息 */

.order-msg {
	background: #fff;
	margin-top: 15rpx;
	font-size: 28rpx;
}

.order-msg .msg-item {
	padding: 20rpx;
	border-top: 2rpx solid #f1f1f1;
}

.order-msg .msg-item:first-child {
	border: 0;
}

.order-msg .msg-item .item {
	display: flex;
	padding: 10rpx 0;
	align-items: center;
}

.order-msg .msg-item .item.payment {
	border-top: 2rpx solid #f1f1f1;
	color: #eb2444;
	padding-top: 30rpx;
}

.order-msg .msg-item .item .item-tit {
	color: #999;
	line-height: 48rpx;
}

.order-msg .msg-item .item .item-txt {
	flex: 1;
	line-height: 48rpx;
}

.order-msg .msg-item .item .copy-btn {
	display: block;
	margin-left: 20rpx;
	border: 2rpx solid #e4e4e4;
	padding: 6rpx 24rpx;
	border-radius: 50rpx;
	font-size: 24rpx;
	line-height: 28rpx;
}

.order-msg .msg-item .item .item-txt.price {
	text-align: right;
}

/* 底部栏 */

.order-detail-footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	max-width: 750rpx;
	background: #fff;
	margin: auto;
	display: -webkit-flex;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	padding: 22rpx 0;
	font-size: 26rpx;
	box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}

.order-detail-footer .dele-order {
	margin-left: 20rpx;
	line-height: 60rpx;
	display: block;
	margin-right: 20rpx;
	width: 150rpx;
	text-align: center;
}

.order-detail-footer .footer-box {
	flex: 1;
	text-align: right;
	line-height: 60rpx;
}

.order-detail-footer .footer-box .buy-again {
	font-size: 26rpx;
	color: #fff;
	background: #eb2444;
	border-radius: 50rpx;
	padding: 10rpx 20rpx;
	margin-right: 20rpx;
}

.order-detail-footer .footer-box .apply-service {
	font-size: 26rpx;
	border-radius: 50rpx;
	padding: 10rpx 20rpx;
	border: 1px solid #e4e4e4;
	margin-right: 20rpx;
}

.clearfix:after {
	content: " ";
	display: table;
	clear: both;
}

/* 根据状态显示不同的颜色 */

.order-state {
	height: 70rpx;
	line-height: 70rpx;
	text-align: right;
	margin-right: 20rpx;
}

.order-state .order-sts {
	color: #eb2444;
	font-size: 28rpx;
}

.order-state .order-sts.gray {
	color: #999;
	height: 32rpx;
	line-height: 32rpx;
}

.order-state .order-sts.normal {
	color: #333;
}
</style>
